<template>
  <div>
    <el-col :span="24" class="bg1">
      <div class="grid-content bg-purple">
        <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="110" :isSubmitBtn="false" />
      </div>
    </el-col>
    <el-col :span="24" class="bg2">
      <BreakSpace label="VIN列表" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
      <FilterTable
        :isExportExcel="false"
        exportFileName="vin数据.xlsx"
        :onCalcExportData="handleExportFun"
        ref="table"
        height="200"
        :onSyncTableData="vinTableChangeFun"
        selectionType="single"
        :isSelectColumn="false"
        :columns="columns"
        :fetchapi="fetchapiVin"
        :params="fetchParamsVin"
        datakey="records"
        columnsRef="plhdcxtable"
        :isColumnFilter="true"
        :onColumnsChange="columns => (this.columns = columns)"
        :onRowSelectChange="arr => (this.onChangeColumn = arr)"
      >
      </FilterTable>
    </el-col>

    <el-col :span="24" class="bg2">
      <BreakSpace label="活动项目列表" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>

      <FilterTable
        ref="tableSport"
        selectionType="single"
        height="200"
        :isSelectColumn="false"
        :isColumnFilter="true"
        :columns="columnSport"
        :onSyncTableData="sportTableChangeFun"
        :isMemoryPagination="true"
        columnsRef="plhdcxtableSport"
        :onColumnsChange="columns => (this.columnSport = columns)"
        :onRowSelectChange="arr => (this.onChangeColumn = arr)"
      >
      </FilterTable>
    </el-col>

    <el-col :span="24" class="bg2">
      <BreakSpace label="配件列表" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>

      <FilterTable
        ref="tablePeij"
        height="200"
        :onSyncTableData="peijTableChangeFun"
        :onCellChange="onCellChange"
        :isSelectColumn="false"
        selectionType="single"
        :columns="columnPeij"
        :isColumnFilter="true"
        :isMemoryPagination="true"
        columnsRef="plhdcxtablePeij"
        :onColumnsChange="columns => (this.columnPeij = columns)"
        :onRowSelectChange="arr => (this.onChangeColumn = arr)"
      >
      </FilterTable>
    </el-col>

    <!--<el-col :span="24" class="bg2">-->
    <!--<BreakSpace label="索赔审核信息" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>-->

    <!--<FilterTable-->
    <!--ref="tableSuopei"-->
    <!--height="200"-->
    <!--:isSelectColumn="false"-->
    <!--selectionType="single"-->
    <!--:columns="columnSuopei"-->
    <!--:isMemoryPagination="true"-->
    <!--columnsRef="yxqPjxmTable"-->
    <!--:onColumnsChange="columns => (this.columns = columns)"-->
    <!--:onRowSelectChange="arr => (this.onChangeColumn = arr)"-->
    <!--&gt;-->
    <!--</FilterTable>-->
    <!--</el-col>-->

    <!--<el-col :span="24" class="bg1">-->
    <!--<div class="grid-content bg-purple">-->
    <!--<FormPanel ref="formPanel2" :list="formList2" :cols="3" :labelWidth="110" :isSubmitBtn="false"-->
    <!--/>-->
    <!--</div>-->
    <!--</el-col>-->

    <div class="dialogBottmView">
      <el-button size="small" type="primary" class="btnStyle" @click="closeMenu('3')">关闭 </el-button>
    </div>
  </div>
</template>

<script>
import { addTtRpMa, getByMaId, getVinByMaId, delMaItem, downVinTem, getAllUser, savePassOrBack, queryUnitCode } from '@/api/repair/batchEventManagement/activityDistribution';

import { arrayObjDeWeight } from '@/utils';

import { dealerMixin } from '@/pages/repair/batchEventManagement/dealerMixin';

import { saveClaimPassOrBack } from '@/api/repair/batchEventManagement/activityClaim';

import { dictionary } from '@/utils/dictMixin';
import { isEmpty } from '@/utils/utils';
import { exportExcelFile } from '@/utils/index';

export default {
  name: 'detail',
  mixins: [dictionary, dealerMixin],
  /*handleType show   活动审核  show-1  索赔审核*/
  props: ['handleType', 'maId'],
  data() {
    this.saveData = null;
    return {
      columnSport: this.createTableColumnSport(),
      columnPeij: this.createTableColumnPeij(),
      columnSuopei: this.createTableColumnSuopei(),
      columns: this.createTableColumns(),
      formList: this.createFormList(),
      formList2: this.createFormList2(),
      visibleVin: false,
      visibleSport: false,
      visiblePeij: false,
      visibleMainCode: false,
      fetchParams: { xhrAbort: true },
      fetchParamPeij: { xhrAbort: true },
      fetchParamSport: { xhrAbort: true },
      fetchParamSuopei: { xhrAbort: true },
      fetchApiPeij: '',
      fetchApi: '',
      fetchApiSport: '',
      fetchApiSuopei: '',
      fetchapiVin: getVinByMaId,
      fetchParamsVin: { xhrAbort: true },
      onChangeColumn: [],
      vinArr: [] /**/,
      sportArr: [],
      peijArr: [],
      status: 1 /*1  表单选择  2 新建配件*/,
      detailObj: {},
      UploadFileIsShow: false,
      actionUrl: '/api/dmscloud.activity/ttRpMa/uploadVinTem'
    };
  },
  components: {},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.BaseSportTable = this.$refs.tableSport.$refs.pageTable;
    this.BasePeijTable = this.$refs.tablePeij.$refs.pageTable;
    // this.BaseSuopeiTable = this.$refs.tableSuopei.$refs.pageTable;

    this.initSelect();

    this.getData();

    this.getUnit();
  },
  methods: {
    async getUnit() {
      // const res = await queryUnitCode();
      // this.columnPeij.find(item => item.dataIndex === 'unit').dictItems = res.data.map(x => ({
      //   text: x.UNIT_NAME,
      //   value: x.UNIT_CODE
      // }));

      this.getAllUnitCode(this.columnPeij, ['unit'], 'table');
    },

    async initSelect() {
      // let res = await getAllUser();
      // // 去重
      // let dataList = arrayObjDeWeight(res.data, 'userId');
      //
      // this.columnSuopei.find(item => item.dataIndex === 'createdBy').dictItems = dataList.map(x => ({
      //   text: x.employeeName,
      //   value: x.userId
      // }));

      this.getAllUsers(this.columnSuopei, ['createdBy'], 'table');
      this.getAllDelears(this.columns, ['resDealer', 'salesDealer'], 'table');
    },

    handleExportFun(row) {
      row.vinStatus = this.createDictText(row.vinStatus, 6040);
    },

    /*配置数量发生改变的时候执行*/
    onCellChange(e, obj) {
      let counts = isEmpty(obj['counts']) ? '0' : obj['counts'];
      let price = isEmpty(obj['price']) ? '0' : obj['price'];
      let amount = obj['amount'];

      let toatalCount = isEmpty(parseInt(counts) * parseInt(price)) ? '0' : parseInt(counts) * parseInt(price);

      obj['amount'] = toatalCount;

      this.BasePeijTable.DO_REFRESH(false);
    },

    /*导入*/
    importHandle() {
      this.handleType = 'import';
      this.UploadFileIsShow = true;
    },

    successHandler(e) {
      console.log('e:::', e);
      if (e != 1) {
        let obj = e[e.length - 1];
        let data = obj['url'];
        let error = data['error'];
        let successArr = data['success'];

        let newArr = [];
        console.log('successArr--', successArr);
        successArr.forEach((item, index) => {
          if (this.vinArr.length > 0) {
            this.vinArr.forEach((obj, pos) => {
              if (item['vin'] != obj['vin']) {
                newArr.push(item);
              }
            });
          } else {
            newArr.push(item);
          }
        });

        if (!isEmpty(error)) {
          this.$notify.error({ title: '提示信息', message: '导入失败数据为:' + error });
        }

        this.BaseTable.EXECUTE_INSERT(newArr);
      }
      this.UploadFileIsShow = false;
    },

    /*根据ID查询*/
    async getData() {
      let res = await getByMaId({ maId: this.maId });
      this.fetchParamsVin = Object.assign({}, this.fetchParamsVin, { maId: this.maId, xhrAbort: false });
      if (res.resultCode == 200 && res.success == true) {
        let data = isEmpty(res['data']) ? {} : res['data'];

        // let ttRpMaAreas = data['ttRpMaAreas'];
        let ttRpMaLabours = data['ttRpMaLabours'];
        let ttRpMaParts = data['ttRpMaParts'];
        let ttRpMaLogVOS = data['ttRpMaLogVOS'];

        // this.BaseTable.EXECUTE_INSERT(ttRpMaAreas);
        this.BaseSportTable.EXECUTE_INSERT(ttRpMaLabours);
        this.BasePeijTable.EXECUTE_INSERT(ttRpMaParts);
        // this.BaseSuopeiTable.EXECUTE_INSERT(ttRpMaLogVOS);

        for (let i in data) {
          this.formList.map(x => {
            if (i == x.fieldName) {
              x.initialValue = data[i];
            }
          });
        }

        // let checkRemarks = isEmpty(data['checkRemarks']) ? '' : data['checkRemarks']
        // this.formList2.find(item => item.fieldName == 'checkRemarks').initialValue = checkRemarks
      }
    },

    peijTableChangeFun(val) {
      this.peijArr = val;
    },

    vinTableChangeFun(val) {
      this.vinArr = val;
    },

    sportTableChangeFun(val) {
      this.sportArr = val;
    },

    async closeMenu(type) {
      this.$emit('close');
    },
    closeDialog() {
      this.visibleVin = false;
      this.visibleSport = false;
      this.visiblePeij = false;
    },

    createFormList() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '批量活动基本信息'
        },

        {
          type: 'INPUT',
          label: '活动编号',
          fieldName: 'maNo',
          itemList: [],
          disabled: true,
          placeholder: '',
          // rules: [{required: true, trigger: 'change'}],
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '活动主题',
          fieldName: 'maTitle',
          disabled: true,
          rules: [{ required: false, trigger: 'change' }],
          placeholder: '请输入',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '批量活动完成率',
          fieldName: 'overRate',
          placeholder: '',
          disabled: true,
          rules: [{ required: false, trigger: 'change' }],
          initialValue: ''
        },

        {
          type: 'DATE',
          label: '活动开始日期',
          fieldName: 'bDate',
          format: 'yyyy-MM-dd',
          disabled: true,
          placeholder: '请选择',
          rules: [{ required: false, trigger: 'change' }],
          initialValue: ''
        },

        {
          type: 'DATE',
          label: '活动截止日期',
          fieldName: 'eDate',
          format: 'yyyy-MM-dd',
          disabled: true,
          placeholder: '请选择',
          rules: [{ required: false, trigger: 'change' }],
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '活动等级',
          fieldName: 'maLevel',
          placeholder: '',
          initialValue: '',
          disabled: true,
          rules: [{ required: false, trigger: 'change' }],
          itemList: this.createDictList(1017)
        },
        {
          type: 'INPUT',
          label: '主损件代码',
          fieldName: 'partCode',
          placeholder: '请选择',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '主损件名称',
          fieldName: 'partName',
          placeholder: '请选择',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '是否OTA活动',
          fieldName: 'ifOta',
          placeholder: '',
          initialValue: '',
          disabled: true,
          rules: [{ required: false, trigger: 'change' }],
          itemList: this.createDictList(1004)
        },
        {
          type: 'INPUT',
          label: '活动策略',
          fieldName: 'maStrategy',
          placeholder: '请选择',
          disabled: true,
          rules: [{ required: false, trigger: 'change' }],
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '预算编号',
          fieldName: 'budgetNo',
          placeholder: '请选择',
          disabled: true,
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '是否索赔结算',
          fieldName: 'ifSettle',
          placeholder: '请选择',
          disabled: true,
          // rules: [{ required: true, trigger: 'change', message: '请选择' }],
          itemList: this.createDictList(1004),
          initialValue: ''
        },

        {
          type: 'TEXT_AREA',
          label: '活动说明',
          fieldName: 'maRemarks',
          placeholder: '请选择',
          disabled: true,
          rules: [{ required: false, trigger: 'change' }],
          initialValue: '',
          selfCols: 3
        },
        {
          type: 'SELECT',
          label: '配件是否满足',
          fieldName: 'ifPart',
          placeholder: '',
          disabled: true,
          initialValue: '',
          rules: [{ required: false, trigger: 'change' }],
          itemList: this.createDictList(1004)
        },
        {
          type: 'SELECT',
          label: '技术文件情况',
          disabled: true,
          fieldName: 'ifTech',
          placeholder: '',
          initialValue: '',
          // rules: [{ required: true, trigger: 'change' }],
          itemList: this.createDictList(1004)
        },
        {
          type: 'SELECT',
          label: '活动状态',
          disabled: true,
          fieldName: 'maStatus',
          placeholder: '',
          initialValue: '',
          rules: [{ required: false, trigger: 'change' }],
          itemList: this.createDictList(1014)
        },
        {
          type: 'INPUT_NUMBER',
          label: '经销商修改销售状态时效(天)',
          disabled: true,
          labelWidth: '180px',
          fieldName: 'editDate',
          placeholder: '',
          initialValue: '',
          rules: [{ required: false, trigger: 'change' }]
        },
        {
          type: 'DATE',
          label: '考核截止日期',
          fieldName: 'verifyDate',
          format: 'yyyy-MM-dd',
          placeholder: '',
          disabled: true,
          initialValue: '请选择',
          rules: [{ required: false, trigger: 'change' }]
        },
        {
          type: 'DATE',
          label: '活动下发日期',
          fieldName: 'maDate',
          format: 'yyyy-MM-dd',
          placeholder: '',
          disabled: true,
          initialValue: '请选择',
          rules: [{ required: false, trigger: 'change' }]
        }
      ];
    },
    createFormList2() {
      return [
        {
          type: 'BREAK_SPACE',
          label: '审核说明'
        },
        {
          type: 'TEXT_AREA',
          label: '审核说明',
          fieldName: 'checkRemarks',
          placeholder: '请选择',
          disabled: false,
          rules: [{ required: false, trigger: 'change' }],
          initialValue: '',
          selfCols: 3
        }
      ];
    },
    /*索赔*/
    createTableColumnSuopei() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作人',
          dataIndex: 'createdBy',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input',
          dictItems: []
        },

        {
          title: '操作时间',
          dataIndex: 'createdAt',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '操作后状态',
          dataIndex: 'checkStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(1022),
          render: props => {
            console.log(props.row.checkStatus);
            return <span>{this.createDictText(props.row.checkStatus, 1022)}</span>;
          }
        },
        {
          title: '审核说明',
          dataIndex: 'checkRemarks',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },

    /*配件*/
    createTableColumnPeij() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '配件代码',
          dataIndex: 'partCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配件名称',
          dataIndex: 'partName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '单位',
          dataIndex: 'unit',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          dictItems: []
        },
        {
          title: '数量',
          dataIndex: 'counts',
          sorter: true,
          filter: true,
          filterType: 'input',
          editType: 'number',
          editable: false
        },
        {
          title: '索赔单价',
          dataIndex: 'price',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '索赔总价',
          dataIndex: 'amount',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },

    /*活动*/
    createTableColumnSport() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '活动项目代码',
          dataIndex: 'labourCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '活动项目名称',
          dataIndex: 'labourName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目类型',
          dataIndex: 'labourType',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '标准工时',
          dataIndex: 'stdLabourHour',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车辆状态',
          dataIndex: 'vinStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList(6040),
          render: props => {
            return <span>{this.createDictText(props.row.vinStatus, 6040)}</span>;
          }
        },
        {
          title: '责任经销商',
          dataIndex: 'resDealer',
          sorter: true,
          filter: true,
          filterItems: [],
          filterType: 'checkbox',
          dictItems: []
        },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'name',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户电话',
          dataIndex: 'mobile',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '生产日期',
          dataIndex: 'productionDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd',
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '销售日期',
          dataIndex: 'salesDate',
          sorter: true,
          dateFormat: 'yyyy-MM-dd',
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '销售经销商',
          dataIndex: 'salesDealer',
          sorter: true,
          filter: true,
          filterItems: [],
          filterType: 'checkbox',
          dictItems: []
        },
        {
          title: '是否完成',
          dataIndex: 'isfinshed',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    }
  }
};
</script>

<style scoped lang="less">
.bg1 {
  border: 1px solid @borderColor;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  padding: @modulePadding;
  padding-left: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}

.bg2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn {
  text-align: center;
}

.btnStyle {
  margin-top: 10px;
}
</style>
